<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!-- 元素遍历操作：针对DOM树中父元素进行遍历【父子级关系】
		 children()   功能：获取匹配元素集合中每个元素的直接子元素
		 parent()     功能：获取匹配元素集合中每个元素的直接父元素
		 
		 siblings()   功能：获取匹配元素集合中每个元素的兄弟子元素
		 
		 next()       功能：获取匹配元素集合中每个元素的下一个兄弟子元素
		 prev()       功能：获取匹配元素集合中每个元素的上一个兄弟子元素
		 
		 each()       功能：遍历匹配元素集合，对每个元素执行指定的函数
		 
		 -->
	</head>
	<style>
		#container{
			border: 3px solid #aa0000;
			margin: 10px;
			padding: 10px;
		}
		.box{
			background-color: aquamarine;
			padding: 10px;
			margin: 10px;
		}
		button{
			margin: 5px;
		}
	</style>
	<script src="../js/jquery-1.11.1.js"></script>
	<body>
		<div id="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		<button id="getcrbtn">获取直接子元素</button>
		<button id="getpbtn">获取父元素</button>
		<button id="getsbtn">获取兄弟元素</button>
		<button id="getnbtn">获取下一个兄弟元素</button>
		<button id="getppbtn">获取上一个兄弟元素</button>
		<button id="eachbtn">遍历元素</button>
		<script>
	//1.点击 获取直接子元素 按钮 .container父元素 给.box 加10px
	$("#getcrbtn").click(function(){
		$("#container").children().css("border","10px solid #1158ff");
	});
	//2.点击 获取直接子元素 按钮 parent父元素 给.box 加10px
	$("#getpbtn").click(function(){
		$("#container").parent().css("background","#ffff66");
	});
	//3. 点击获取兄弟元素 按钮 box3的兄弟元素 加背景颜色
	$("#getsbtn").click(function(){
		$("#box3").siblings().css("background","#f00");
	});
	//4.点击 获取下一个兄弟元素 按钮 box2的下一个元素 加背景颜色
	$("#getnbtn").click(function(){
		$("#box2").next().css("border","15px solid green");
	});
	//5.点击 获取上一个兄弟元素 按钮 box1的下一个元素 加背景颜色
	$("#getppbtn").click(function(){
		$("#box4").prev().css({"width":"200px",
		                       "height":"200px",
							    "background":"#ff0",
								"border-radius":"50%",
								 "text-shadow":"5px 5px 10px #ff0",
								 "font-size":"2em",
								 "line-height":"200px",
								 "text-align":"2em"
								 
		});
	});
	//6.点击 遍历元素 按钮 实现动态输出这是box1 ...
	//each(function(index,element){ 传入下表${index} })
	$("#eachbtn").click(function(){
		$("#box3").each(function(i,e){ //下标
			$(e).text(`这是第${i+1}盒子`);
		});
	});
		</script>
	</body>
</html>